<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>个人中心</title>
	<link rel="stylesheet" type="text/css" href="__CSS__/api.css" />
	<link rel="stylesheet" type="text/css" href="__CSS__/aui.css" />
	<style>
		body {
			background-color: #F4F4F4;
		}

		.card {
			position: relative;
			height: 9.05rem;
			background: -webkit-linear-gradient(right, #F81C6B, #F81C6B);
		}

		.top {
			padding-top: 1.875rem;
		}

		.avatar {
			width: 2.325rem;
			height: 2.325rem;
			border-radius: 50%;
			margin-left: 0.85rem;
			margin-right: 0.65rem;
		}

		.avatar img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.nickname {
			font-size: 17px;
			color: #FFFFFF;
			padding-bottom: 0.3rem;
		}

		.phone {
			font-size: 14px;
			color: #FFFFFF;
		}

		.message {
			width: 0.975rem;
			height: 0.9rem;
			margin-right: 0.75rem;
		}

		.order {
			position: absolute;
			top: 6.65rem;
			width: 100%;
			height: 7.725rem;
			border-radius: 0.55rem;
		}

		.orderrr {
			width: 17.225rem;
			height: 7.725rem;
			margin: 0 auto;
			border-radius: 0.55rem;
			background-color: #FFFFFF;
		}

		.myOrder {
			height: 2.55rem;
			line-height: 2.55rem;
			font-size: 13px;
			color: #B7B7B7;
			padding-left: 0.75rem;
			padding-right: 0.75rem;
		}

		.left_title {
			font-size: 15px;
			color: #404040;
			font-weight: bold;
		}

		.arrow {
			width: 0.3rem;
			height: 2.4rem;
			background: url(__IMG__/right_arrow.png) no-repeat center center;
			background-size: 0.3rem 0.55rem;
			margin-left: 0.1rem;
		}

		.four {
			width: 100%;
		}

		.four_all {
			width: 3.045rem;
			position:relative;
		}

		.four_11 {
			width: 1.15rem;
			height: 1rem;
			margin: 0 auto;
			margin-top: 1.45rem;
		}

		.four_22 {
			width: 1.25rem;
			height: 1rem;
			margin: 0 auto;
			margin-top: 1.45rem;
		}

		.four_33 {
			width: 1.15rem;
			height: 0.925rem;
			margin: 0 auto;
			margin-top: 1.45rem;
		}

		.four_44 {
			width: 1.125rem;
			height: 1.05rem;
			margin: 0 auto;
			margin-top: 1.45rem;
		}

		.four_55 {
			width: 1.1rem;
			height: 1.1rem;
			margin: 0 auto;
			margin-top: 1.45rem;
		}

		.four_name {
			font-size: 14px;
			color: #555555;
			padding-top: 0.325rem;
			text-align: center;
		}

		.service {
			width: 17.225rem;
			height: 7.725rem;
			margin: 6.075rem auto 0;
			border-radius: 0.55rem;
			background-color: #FFFFFF;
		}

		.service_title {
			font-size: 15px;
			color: #404040;
			font-weight: bold;
			height: 2.25rem;
			line-height: 2.25rem;
			padding-left: 0.75rem;
		}

		.tu {
			height: 2.34rem;
			line-height: 2.34rem;
			padding-left: 0.75rem;
			padding-right: 0.75rem;
			margin-top: 0.3rem;
			margin-bottom: 0.3rem;
		}

		.icon {
			width: 1.2rem;
			height: 1.2rem;
			margin-top: 0.5rem;
			margin-bottom: 0.6rem;
		}

		.icon img {
			margin: 0 auto;
		}

		.left {
			font-size: 15px;
			color: #555555;
			padding-left: 0.5rem;
		}

		.arrow1 {
			width: 0.3rem;
			height: 2.3rem;
			background: url(__IMG__/right_arrow.png) no-repeat center center;
			background-size: 0.3rem 0.55rem;
			margin-left: 0.1rem;
		}

		.service1 {
			width: 17.225rem;
			margin: 6.075rem auto 0;
			border-radius: 0.55rem;
			background-color: #FFFFFF;
		}

		.num {
			min-width:0.6rem;
			height: 0.6rem;
			line-height: 0.28rem;
			text-align: center;
			border: 1px solid #F04040;
			border-radius: 50%;
			position:absolute;
			top:1.325rem;
			right:0.6rem;
			z-index: 999;
		}
		.hidden{
			display: none;
		}
	</style>
</head>

<body>
	<div class="card">


		<div class="top flex-wrap">
			<div class="flex-con" onclick="person()">
				<div class="flex-wrap">
					<div class="avatar">
						<img src="{$user.user_image ?? '__IMG__/avatar.png'}" id='imggg'/>
					</div>
					<div class="flex-con">
						<div class="nickname" id='nameee'>{$user.user_username}</div>
						<div class="phone" id='phoneee'>{$user.user_phone}</div>
					</div>
				</div>
			</div>
			<!--<div class="message" onclick="message()" tapmode>-->
				<!--<img src="__IMG__/message.png" />-->
			<!--</div>-->
		</div>


		<div class="order">
			<div class="orderrr">
				<div class="myOrder flex-wrap underLine" onclick="order(0)" tapmode>
					<div class="left_title">我的订单</div>
					<div class="flex-con"></div>
					<div>查看更多订单</div>
					<div class="arrow"></div>
				</div>
				<div class="four">
					<div class="flex-wrap" style="width:100%;">
						<div class="aui-col-xs-3"  tapmode="active" onclick="order(1)" tapmode>
							<img src="__IMG__/order1.png" class="four_11" />
							<div class="four_name aui-ellipsis-2">待付款</div>
							<div class="num {if $data['noPay']<=0}hidden{/if}">{$data['noPay']}</div>
						</div>
						<div class="aui-col-xs-3" tapmode="active" onclick="order(2)" tapmode>
							<img src="__IMG__/order3.png" class="four_33" />
							<div class="four_name aui-ellipsis-2">待收货</div>
							<div class="num {if $data['havePay']<=0}hidden{/if}">{$data['havePay']}</div>
						</div>
						<div class="aui-col-xs-3" tapmode="active" onclick="order(3)" tapmode>
							<img src="__IMG__/order4.png" class="four_44" />
							<div class="four_name aui-ellipsis-2">待评价</div>
							<div class="num {if $data['noComment']<=0}hidden{/if}">{$data['noComment']}</div>
						</div>
						<div class="aui-col-xs-3" tapmode="active" onclick="order(4)" tapmode>
							<img src="__IMG__/order5.png" class="four_55" />
							<div class="four_name aui-ellipsis-2">已完成</div>
						</div>
					</div>
				</div>

			</div>
		</div>


	</div>


	<div class="service1">
		<div class="service_title underLine">我的服务</div>
		<div class="tu flex-wrap" onclick="address()" tapmode>
			<div class="icon"><img src="__IMG__/service1.png" /></div>
			<div class="left">我的地址</div>
			<div class="flex-con"></div>
			<div class="arrow1"></div>
		</div>
		<div class="tu flex-wrap" onclick="set()" tapmode>
			<div class="icon"><img src="__IMG__/service2.png" /></div>
			<div class="left">设置</div>
			<div class="flex-con"></div>
			<div class="arrow1"></div>
		</div>
		<div class="tu flex-wrap" onclick="feedback()" tapmode>
			<div class="icon"><img src="__IMG__/service3.png" /></div>
			<div class="left">意见反馈</div>
			<div class="flex-con"></div>
			<div class="arrow1"></div>
		</div>
	</div>


</body>
{include file="public/footer3" /}
<script type="text/javascript">

	function order(type) {
        location.href = '{:url("Orders/index")}?type='+type;
    }
	//消息
	function message() {
        location.href = '{:url("Index/message")}';
	}
	//个人中心
	function person() {
        location.href = '{:url("My/userSet")}';

	}

	//我的地址
	function address() {
        location.href = '{:url("My/address")}';
	}
	//设置
	function set() {
        location.href = '{:url("My/set")}';
	}
	//意见反馈
	function feedback() {
        location.href = '{:url("My/feedback")}';
	}

    pushHistory();
    window.addEventListener("popstate", function(e) {
        window.close();
        WeixinJSBridge.call('closeWindow');
    }, false);
    function pushHistory() {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }
    XBack.listen(function(){
        alert('back');
    });
</script>

</html>
